import React, {Component} from 'react';
import TheTable from "@/components/TheTable";
import ThePagination from "../../../components/ThePagination";
import TheButton from "@/components/TheButton";
import TheQueryForm from '@/components/TheQueryForm';
import TheTableExtend from '@/components/TheTableExtend'
import {
    CheckCircleFilled,
} from '@ant-design/icons';
import {
    apiDynamicPage,
    apiGetTimeShowFlag,
    apiSetTimeShow,
    apiSetReleaseTime,
    apiSetAuditStatus,
    apiGetListDynamicShare,
    apiGetListTabCategory,
    apiAddDynamicCategory,
    apiGetListTabCategoryByDynamicId,
    apiGetMemberByPhone,
    apiDynamicWebAdd
} from '@/request/petCircleUtil/dynamic';
import {apiGetDBAreaList} from "@/request/callServicer/serveList";
import TheImage from '@/components/TheImage'
import VideoPlayer from "@/components/VideoPlayer"
import store from "@/store/store"
import SearchData from "./searchData";
import {
    Modal,
    Alert,
    Switch,
    Space,
    DatePicker,
    Row,
    Col,
    Tag,
    Select,
    message,
    Tooltip,
    Typography,
    Form,
    Input,
    Button,
    InputNumber
} from "antd"
import TextArea from "antd/es/input/TextArea";
import moment from "moment";
import {isJsonString} from '@/utils/isJsonString.js'
import './component/style.scss'
import AliOssUpload from "./component/OSSUpload";
import _ from 'lodash'

const {Paragraph} = Typography;

export default class Dynamic extends Component {
    constructor() {
        super()
        this.state = {
            dynamicId: null,
            showPetTimeModal: false,
            petTimeChecked: false,
            showReleaseTimeModal: false,
            releaseTime: null,
            showBatchCheckModal: false,
            batchStatus: 1,
            batchReason: null,
            showDurationModal: false,
            showManualTabModal: false,
            manualTabList: [],
            manualTabVal: [],
            pageData: {
                pageNo: 1,
                pageSize: 10
            },
            dataSource: [],
            total: 0,
            newColumns: [],
            selectedRowKeys: [],
            form_show: true,
            queryForm: {},
            searchOption: SearchData,
            sortedInfo: {
                orderByDesc: 'create_time'
            },
            columns: [
                {
                    title: "实际发布时间",
                    dataIndex: "actualReleaseTime",
                    key: "actualReleaseTime",
                },
                {
                    title: "动态标题",
                    dataIndex: "dynamicTitle",
                    key: "dynamicTitle",
                },
                {
                    title: "动态内容",
                    dataIndex: "dynamicText",
                    key: "dynamicText",
                    ellipsis: true,
                    onCell: () => {
                        return {
                            style: {
                                maxWidth: 250,
                                overflow: 'hidden',
                                whiteSpace: 'nowrap',
                                textOverflow: 'ellipsis',
                                cursor: 'pointer'
                            }
                        }
                    },
                    render: (text) => {
                        return <Tooltip placement="topLeft" title={text}>
                            <span>{text}</span>
                        </Tooltip>
                    }
                },
                {
                    title: "图片/视频",
                    dataIndex: "fileUrl",
                    key: "fileUrl",
                    render: (text, record) => {
                        if (isJsonString(text)) {
                            let data = JSON.parse(text)
                            if (record.fileType === 1) {
                                return <Space>
                                    {
                                        data.image.map((v, i) => {
                                            return <TheImage key={i} src={v.url} width={80} height={80}/>
                                        })
                                    }
                                </Space>
                            } else {
                                return <TheImage preview={{visible: false}}
                                                 src={data.video[0].url + "?x-oss-process=video/snapshot,t_1000,m_fast"}
                                                 width={80} height={80} onClick={() => {
                                    this.videoDialog(data.video[0].url)
                                }}/>
                            }
                        }
                    }
                },
                {
                    title: "转发数",
                    dataIndex: "share_num",
                    key: "share_num",
                    sorter: true,
                    render: (text, record) => {
                        return <>{record.shareNum}<TheButton onClick={() => this.getDurationData(record.dynamicId)}
                                                             type="link">详情</TheButton></>
                    }
                },
                {
                    title: "评论数",
                    dataIndex: "comments",
                    key: "comments",
                    sorter: true,
                    render: (text, record) => {
                        return record.comments
                    }
                },
                {
                    title: "点赞数",
                    dataIndex: "like_num",
                    key: "like_num",
                    sorter: true,
                    render: (text, record) => {
                        return record.likeNum
                    }
                },
                {
                    title: "收藏数",
                    dataIndex: "collect_num",
                    key: "collect_num",
                    sorter: true,
                    render: (text, record) => {
                        return record.collectNum
                    }
                },
                {
                    title: "动态标签",
                    dataIndex: "labelNames",
                    key: "labelNames",
                },
                {
                    title: "用户昵称",
                    dataIndex: "nickName",
                    key: "nickName",
                },
                {
                    title: "省",
                    dataIndex: "province",
                    key: "province",
                },
                {
                    title: "详细地址",
                    dataIndex: "address",
                    key: "address",
                    render: (text) => {
                        if (text && text.length > 15) {
                            return <Tooltip title={text}>
                                {text.slice(0, 15)}...
                            </Tooltip>
                        } else {
                            return text
                        }
                    }
                },
                {
                    title: "编辑时间",
                    dataIndex: "edit_time",
                    key: "edit_time",
                    sorter: true,
                    render: (text, record) => {
                        return record.editTime
                    }
                },
                {
                    title: "敏感词",
                    dataIndex: "sensitiveWords",
                    key: "sensitiveWords",
                },
                {
                    title: "内容tab分类",
                    dataIndex: "tabCategoryName",
                    key: "tabCategoryName",
                },
                {
                    title: "审核状态-审核时间",
                    dataIndex: "auditState",
                    key: "auditState",
                    render: (text, record) => {
                        let label = ''
                        switch (text) {
                            case "1":
                                label = "通过"
                                break;
                            case "0":
                                label = "驳回"
                                break;
                            case "2":
                                label = "待审核"
                                break;
                            default:
                                label = "字段值错误"
                        }
                        return label + "-" + (record.auditTime ?? '')
                    }
                },
                {
                    title: "审核理由",
                    dataIndex: "auditReason",
                    key: "auditReason",
                },
                {
                    title: "预计发布时间",
                    dataIndex: "expectReleaseTime",
                    key: "expectReleaseTime",
                },
               
                {
                    title: "编号",
                    dataIndex: "dynamicId",
                    key: "dynamicId",
                },
                {
                    title: "发布状态",
                    dataIndex: "releaseState",
                    key: "releaseState",
                    render: (text, record) => {
                        let label = ''
                        switch (text) {
                            case "1":
                                label = <Tag color="green">已发布</Tag>
                                break;
                            case "0":
                                label = <Tag color="cyan">未发布</Tag>
                                break;
                            // case "3":
                            //     label = <Tag color="red">发布异常</Tag>
                            //     break;
                            default:
                                label = "字段值错误"
                        }
                        return label
                    }
                },
                {
                    title: "动态类型",
                    dataIndex: "dynamicType",
                    key: "dynamicType",
                    render: (text, record) => {
                        let label = ''
                        switch (text) {
                            case "1":
                                label = "运营动态"
                                break;
                            case "2":
                                label = "普通动态"
                                break;
                            default:
                                label = "字段值错误"
                        }
                        return label
                    }
                },
                {
                    title: "操作",
                    fixed: "right",
                    width: 200,
                    render: (text, render) => {
                        return (
                            <div>
                                {render.releaseState === '1' && <TheButton haspermi={['petCircle:dynamic:goEvaluate']}
                                                                           onClick={() => this.openEvaluateModal(render)}>去评价</TheButton>}
                                <TheButton haspermi={['petCircle:dynamic:lookComment']}
                                           onClick={() => this.goComment(render.dynamicId)}>查看评论</TheButton>
                                <TheButton haspermi={['petCircle:dynamic:detail']}
                                           onClick={() => this.goDetail(render.dynamicId)}>查看详情</TheButton>
                                {
                                    render.dynamicType === "1" &&
                                    <TheButton haspermi={['petCircle:dynamic:edit']}
                                               onClick={() => this.goEdit(render.dynamicId)}>修改</TheButton>
                                }
                                <TheButton haspermi={['petCircle:dynamic:relevanceTab']}
                                           onClick={() => this.getListTabCategory(render.dynamicId)}>手动关联tab分类</TheButton>
                            </div>
                        );
                    },
                },
                {
                    title: "审核",
                    fixed: "right",
                    width: 140,
                    render: (text, render) => {
                        return (
                            <div>
                                {
                                    render.auditState === "1" &&
                                    <TheButton haspermi={['petCircle:dynamic:reject']}
                                               onClick={() => this.goAudit(render.dynamicId, 0)}>驳回</TheButton>
                                }
                                {
                                    render.auditState === "0" &&
                                    <TheButton haspermi={['petCircle:dynamic:pass']}
                                               onClick={() => this.goAudit(render.dynamicId, 1)}>通过</TheButton>
                                }
                                {
                                    render.auditState === "2" && <>
                                        <TheButton haspermi={['petCircle:dynamic:pass']}
                                                   onClick={() => this.goAudit(render.dynamicId, 1)}>通过</TheButton>
                                        <TheButton haspermi={['petCircle:dynamic:reject']}
                                                   onClick={() => this.goAudit(render.dynamicId, 0)}>驳回</TheButton></>
                                }
                            </div>
                        );
                    },
                },
            ],
            durationColumns: [
                {
                    title: "转发方式",
                    dataIndex: "shareType",
                    key: "shareType",
                    render: (text, render) => {
                        let label = ''
                        switch (text) {
                            case 1:
                                label = "微信"
                                break;
                            case 2:
                                label = "朋友圈"
                                break;
                            case 3:
                                label = "QQ"
                                break;
                            case 4:
                                label = "微博"
                                break;
                            default:
                                label = "字段值错误"
                        }
                        return label
                    }
                },
                {
                    title: "转发次数",
                    dataIndex: "shareNum",
                    key: "shareNum",
                },
                {
                    title: "打开次数",
                    dataIndex: "openNum",
                    key: "openNum",
                },
                {
                    title: "点击”打开APP”次数",
                    dataIndex: "openAppNum",
                    key: "openAppNum",
                },
            ],
            durationDataSource: [],
            evaluateModalVisible: false,
            dynamicDetailData: {},
            evaluateModalColumns: [
                {
                    title: "序号",
                    dataIndex: "no",
                    key: "no",
                },
                {
                    title: "用户手机号",
                    dataIndex: "phone",
                    key: "phone",
                    render: (text, record, index) => {
                        return <InputNumber
                            disabled={record.status}
                            placeholder="请输入11位手机号码"
                            onChange={(value) => this.getMemberByPhone(value, index)}
                            style={{
                                width: 200,
                            }}
                            maxLength={11}
                        />
                    }
                },
                {
                    title: "用户昵称",
                    dataIndex: "nickName",
                    key: "nickName",
                },
                {
                    title: "输入评论",
                    dataIndex: "commentsText",
                    key: "commentsText",
                    render: (text, record, index) => {
                        return <Input.TextArea
                            disabled={record.status}
                            rows={4}
                            allowClear
                            maxLength={300}
                            showCount={true}
                            onChange={(value) => this.onChangeCommentsText(value, index)}
                            style={{
                                width: 200,
                            }}
                        />
                    }
                },
                {
                    title: "发布地",
                    dataIndex: "province",
                    key: "province",
                    render: (text, record, index) => {
                        return <Select
                            disabled={record.status}
                            style={{width: 150}}
                            options={this.state.dbArea}
                            allowClear
                            showSearch
                            optionFilterProp="children"
                            filterOption={(input, option) =>
                                (option?.areaName ?? '').toLowerCase().includes(input.toLowerCase())
                            }
                            fieldNames={{
                                label: 'areaName',
                                value: 'areaName',
                            }}
                            onChange={(value) => this.onChangeProvince(value, index)}
                        />
                    }
                },
                {
                    title: "操作",
                    fixed: "right",
                    width: 100,
                    render: (text, render) => {
                        if (render.status) {
                            return <Space style={{lineHeight: "20px"}}>
                                <CheckCircleFilled style={{color: "#40a9ff", fontSize: 20}}/>
                                <span>已发布</span>
                            </Space>
                        } else {
                            return <TheButton type={"primary"} size={"middle"} disabled={!render.verify}
                                              onClick={() => this.sendEvaluate(render)}>发布</TheButton>
                        }

                    },
                },
            ],
            evaluateModalDataSource: [{
                status: false,
                verify: false,
                no: 1
            }],
            dbArea: []
        }
    }

    componentDidMount() {
        this.getData()
        this.getDbArea()
        message.config({
            top: 110,
            // maxCount: 1
        });
    }

    // 获取省地区列表
    getDbArea() {
        apiGetDBAreaList({
            level: 1
        }).then(res => {
            if (res.code === 0) {
                this.setState({
                    dbArea: res.data,
                })
            }
        })
    }

    getData = async () => {
        let values = this.state.queryForm
        let {pageNo, pageSize} = this.state.pageData
        // 编辑时间
        if (values && "editTime" in values) {
            values.editTimeBegin = moment(values.editTime[0]).format('YYYY-MM-DD HH:mm:ss')
            values.editTimeEnd = moment(values.editTime[1]).format('YYYY-MM-DD HH:mm:ss')
            delete values.editTime
        }
        // 预计发布时间
        if (values && "expectReleaseTime" in values) {
            values.expectReleaseTimeBegin = moment(values.expectReleaseTime[0]).format('YYYY-MM-DD HH:mm:ss')
            values.expectReleaseTimeEnd = moment(values.expectReleaseTime[1]).format('YYYY-MM-DD HH:mm:ss')
            delete values.expectReleaseTime
        }
        // 实际发布时间
        if (values && "actualReleaseTime" in values) {
            values.actualReleaseTimeBegin = moment(values.actualReleaseTime[0]).format('YYYY-MM-DD HH:mm:ss')
            values.actualReleaseTimeEnd = moment(values.actualReleaseTime[1]).format('YYYY-MM-DD HH:mm:ss')
            delete values.actualReleaseTime
        }
        values = this.dataFilter(values)
        const res = await apiDynamicPage({pageNo, pageSize, ...values, ...this.state.sortedInfo})
        if (res.code === 0 && res.data) {
            this.setState({
                dataSource: res.data,
                pageData: {
                    pageNo: res.pageNo,
                    pageSize: res.pageSize
                },
                total: res.totalCount,
            })
        }
    }
    // 跳转新建
    goAdd = () => {
        this.props.history.push(`/petCircleUtil/dynamic/create/null`);
    }
    // 跳转详情
    goDetail = (id) => {
        this.props.history.push(`/petCircleUtil/dynamic/view/${id}`);
    }
    // 跳转编辑
    goEdit = (id) => {
        this.props.history.push(`/petCircleUtil/dynamic/edit/${id}`);
    }
    // 跳转评论
    goComment = (id) => {
        store.dispatch({
            type: 'SaveSearchValues',
            data: {
                pathName: "comments",
                source: "dynamic",
                queryForm: {
                    petDynamicId: id
                },
                pageNo: 1, pageSize: 10
            }
        })
        this.props.history.push(`/petCircleUtil/comments`);
    }
    // 开启通过/驳回模态窗
    goAudit = (id, type) => {
        this.setState({
            dynamicId: id,
            batchStatus: type,
            showBatchCheckModal: true
        })
    }
    // 宠圈时间switch回显
    getTimeShowFlag = async () => {
        const res = await apiGetTimeShowFlag()
        if (res.code === 0 && res.data) {
            this.setState({
                petTimeChecked: res.data.timeShowSwitch === "1",
                showPetTimeModal: true,
                dictionariesId: res.data.dictionariesId
            })
        }
    }
    // 宠圈时间展示Modal 提交
    postPetTimeHandleOk = async () => {
        let {petTimeChecked, dictionariesId} = this.state;
        const res = await apiSetTimeShow({
            timeShowSwitch: petTimeChecked ? "1" : "0",
            dictionariesId
        })
        if (res.code === 0) {
            message.success(`设置成功`)
            this.setState({showPetTimeModal: false})
        }
    }
    // 批量设置发布时间Modal 提交
    postReleaseTimeHandleOk = async () => {
        let {releaseTime, selectedRowKeys} = this.state
        if (selectedRowKeys.length <= 0) {
            message.warning(`请选择动态`)
            return
        }
        if (releaseTime === null) {
            message.warning(`请选择时间`)
            return
        }
        // 判断发布预设时间是否大于当前时间
        let a = moment(), b = moment(releaseTime)
        if (a.diff(b) > 0) {
            message.error("预计发布时间不可小于当前时间")
            return
        }
        const res = await apiSetReleaseTime({
            expectReleaseTime: releaseTime,
            petDynamicIds: selectedRowKeys
        })
        if (res.code === 0) {
            message.success(`设置成功`)
            this.setState({showReleaseTimeModal: false})
            this.getData()
        }
    }
    // 批量审核操作Modal 提交
    postBatchCheckHandleOk = async () => {
        let {batchStatus, batchReason, selectedRowKeys, dynamicId} = this.state
        if (selectedRowKeys.length <= 0 && dynamicId === null) {
            message.warning(`请选择动态`)
            return
        }
        if (dynamicId !== null) {
            selectedRowKeys = [dynamicId]
        }
        if (batchReason === null || batchReason === '') {
            message.warning(`请输入理由`)
            return
        }
        const res = await apiSetAuditStatus({
            dataIdList: selectedRowKeys,
            dataType: 1,
            auditType: batchStatus,
            auditReason: batchReason
        })
        if (res.code === 0) {
            message.success('设置成功')
            this.setState({
                batchReason: null,
                showBatchCheckModal: false
            })
            this.getData()
        }
    }
    // 获取tab分类
    getListTabCategory = async (id) => {
        await this.getListTabCategoryByDynamicId(id)
        const res = await apiGetListTabCategory()
        if (res.code === 0) {
            this.setState({
                dynamicId: id,
                showManualTabModal: true,
                manualTabList: res.data.map(item => ({label: item.categoryName, value: item.categoryId}))
            })
        }
    }
    getListTabCategoryByDynamicId = async (petDynamicId) => {
        const res = await apiGetListTabCategoryByDynamicId({petDynamicId})
        if (res.code === 0) {
            this.setState({
                tabValue: res.data.map(item => (item.categoryId))
            })
        }
    }
    // 手动关联TAB
    postManualTabHandleOk = async () => {
        let {dynamicId, tabValue} = this.state
        const res = await apiAddDynamicCategory({
            petDynamicId: dynamicId,
            categoryIdList: tabValue
        })
        if (res.code === 0) {
            message.success('设置成功')
            this.setState({showManualTabModal: false})
            this.getData()
        }
    }

    // 查询转发详情表格数据
    getDurationData = async (id) => {
        const res = await apiGetListDynamicShare({
            dataId: id,
            dataType: 1
        })
        if (res.code === 0) {
            this.setState({
                showDurationModal: true,
                durationDataSource: res.data
            })
        }
    }
    // 视频预览
    videoDialog = (URL) => {
        Modal.confirm({
            title: '视频预览',
            icon: "",
            content: <VideoPlayer src={URL}/>,
            cancelText: '关闭',
            width: "535px",
            maskClosable: true,
            closable: true,
            okButtonProps: {style: {display: "none"}},
            cancelButtonProps: {style: {display: "none"}},
        })
    }
    // 排序查询
    handleTableChange = (pagination, filters, sorter) => {
        let sortedInfo = {}
        if (sorter.order === "ascend") {
            sortedInfo.orderByAsc = sorter.field
        } else if (sorter.order === "descend") {
            sortedInfo.orderByDesc = sorter.field
        } else {
            sortedInfo.orderByDesc = 'create_time'
        }
        this.setState({
            sortedInfo
        }, () => {
            this.getData()
        })
    }

    // 搜索表单重置
    onReset() {
        this.setState({
            queryForm: {},
        }, () => {
            this.pageChange(1, 10)
        })
    }

    onColumnsFilter(value) {
        this.setState({
            newColumns: value
        })
    }

    onFormSearch(values) {
        // let {queryForm} = this.state
        this.setState({
            pageData: {pageNo: 1, pageSize: 10}
        }, () => {
            this.setState({
                queryForm: {...values}
            }, () => {
                this.getData()
            })
        })
    }

    onSelectChange = (selected, selectedRows) => {
        this.setState({
            selectedRowKeys: selected
        })
    }

    pageChange = (pageNo, pageSize) => {
        this.setState({
            pageData: {
                pageNo,
                pageSize
            }
        }, () => {
            this.getData()
        })
    };
    // 去除不使用的undefined字段
    dataFilter = (data) => {
        return Object.keys(data)
            .filter((key) => data[key] !== null && data[key] !== undefined)
            .reduce((acc, key) => ({...acc, [key]: data[key]}), {});
    }
    // 可领时间 禁止选择当天之前时间
    range = (start, end) => {
        const result = [];
        for (let i = start; i <= end; i++) {
            result.push(i);
        }
        return result;
    };
    disabledDate = (current, partial) => {
        return current && current < moment().startOf('day');
    };
    // 打开模态窗口
    openEvaluateModal = (data) => {
        this.setState({
            evaluateModalVisible: true,
            dynamicDetailData: data
        })
    }
    // 转换显示图片||视频
    trans2PicOrVideo = (text) => {
        let record = this.state.dynamicDetailData
        if (isJsonString(text)) {
            let data = JSON.parse(text)
            if (record.fileType === 1) {
                return <Space>
                    {
                        data.image.map((v, i) => {
                            return <TheImage key={i} src={v.url} width={80} height={80}/>
                        })
                    }
                </Space>
            } else {
                return <TheImage preview={{visible: false}}
                                 src={data.video[0].url + "?x-oss-process=video/snapshot,t_1000,m_fast"}
                                 width={80} height={80} onClick={() => {
                    this.videoDialog(data.video[0].url)
                }}/>
            }
        }
    }
    // 获取用户信息
    getMemberByPhone = _.debounce((value, index) => {
        let {evaluateModalDataSource} = this.state;
        let newData = _.cloneDeep(evaluateModalDataSource);
        let regExp = /^1(1|2|3|4|5|6|7|8|9)\d{9}$/g;
        if (regExp.test(value)) {
            if (value && value.toString().length === 11) {
                apiGetMemberByPhone({phone: value}).then((res)=>{
                    if (res.code === 0 && res.data) {
                        newData[index]["nickName"] = res.data.nickName
                        newData[index]["memberId"] = res.data.memberId
                    } else {
                        message.error(`无手机号:${value}信息,请重新输入`)
                        newData[index]["nickName"] = null
                        newData[index]["memberId"] = null
                    }
                    this.setState({
                        evaluateModalDataSource: newData
                    }, () => {
                        this.checkRowData(index)
                    });
                })
            } else {
                message.error("请输入正确的号码")
            }
        } else {
            newData[index]["nickName"] = null
            newData[index]["memberId"] = null
            this.setState({
                evaluateModalDataSource: newData
            }, () => {
                this.checkRowData(index)
            });
        }
    }, 500)
    // 获取评价text内容赋值
    onChangeCommentsText = _.debounce((value, index) => {
        let {evaluateModalDataSource} = this.state;
        let newData = _.cloneDeep(evaluateModalDataSource)
        newData[index]["commentsText"] = value.target.value
        this.setState({
            evaluateModalDataSource: newData
        }, () => {
            this.checkRowData(index)
        });
    }, 300)
    // 获取省地址内容赋值
    onChangeProvince = (value, index) => {
        let {evaluateModalDataSource} = this.state;
        let newData = _.cloneDeep(evaluateModalDataSource)
        newData[index]["province"] = value
        this.setState({
            evaluateModalDataSource: newData
        }, () => {
            this.checkRowData(index)
        });
    }
    // 校验当前行数据是否已经填写完成
    checkRowData = (index) => {
        let {evaluateModalDataSource} = this.state;
        let newData = _.cloneDeep(evaluateModalDataSource)
        newData[index]["verify"] = !!(newData[index]["memberId"] && newData[index]["commentsText"] && newData[index]["province"]);
        this.setState({
            evaluateModalDataSource: newData
        });
    }
    // 新增评价
    sendEvaluate = (data) => {
        apiDynamicWebAdd({
            memberId: data.memberId,
            commentsText: data.commentsText,
            province: data.province,
            dataId: this.state.dynamicDetailData.dynamicId,
        }).then((res) => {
            if (res.code === 0) {
                message.success("评价成功")
                let {evaluateModalDataSource} = this.state;
                let newData = _.cloneDeep(evaluateModalDataSource)
                newData[data.no - 1]["status"] = true
                this.setState({
                    evaluateModalDataSource: newData
                });
            }
        })
    }
    // 评价表格添加行
    evaluateModalDataSourceAdd = () => {
        let {evaluateModalDataSource} = this.state;
        let newData = _.cloneDeep(evaluateModalDataSource)
        newData.push({
            status: false,
            verify: false,
            no: evaluateModalDataSource.length + 1
        })
        this.setState({
            evaluateModalDataSource: newData
        });
    }

    render() {
        const {
            columns,
            dataSource,
            pageData: {pageNo, pageSize},
            total,
            searchOption,
            form_show,
            newColumns,
            selectedRowKeys,
            showPetTimeModal,
            petTimeChecked,
            showReleaseTimeModal,
            showBatchCheckModal,
            batchStatus,
            showDurationModal,
            durationColumns,
            durationDataSource,
            showManualTabModal,
            manualTabList,
            tabValue,
            evaluateModalVisible,
            dynamicDetailData,
            evaluateModalColumns,
            evaluateModalDataSource,
        } = this.state;
        const rowSelection = {
            selectedRowKeys,
            preserveSelectedRowKeys: true,
            onChange: this.onSelectChange,
            // getCheckboxProps: (record) => {
            //     return {
            //         disabled: record.dynamicType === 2,
            //     }
            // },
        }
        return (
            <div className={"p-layout-box commodity-content"}>
                <TheQueryForm ref={(ref) => this.queryFormRef = ref} show={form_show} option={searchOption}
                              onGetValues={(values) => this.onFormSearch(values)}
                              onReset={(values) => this.onReset(values)}
                >
                </TheQueryForm>
                <TheTableExtend
                    columns={columns}
                    onFormTrigger={() => this.setState({form_show: !this.state.form_show})}
                    onTableRefresh={() => this.getData()}
                    onColumnsFilter={(value) => this.onColumnsFilter(value)}
                >
                    <TheButton haspermi={['petCircle:dynamic:add']} type="primary" size="middle" onClick={this.goAdd}>
                        新增运营动态
                    </TheButton>
                    <TheButton haspermi={['petCircle:dynamic:timeShow']} type="" size="middle"
                               onClick={() => this.getTimeShowFlag()}>
                        宠圈时间展示
                    </TheButton>
                    <TheButton haspermi={['petCircle:dynamic:setPublishTime']} type="" size="middle"
                               onClick={() => this.setState({showReleaseTimeModal: true})}>
                        批量设置发布时间
                    </TheButton>
                    <TheButton haspermi={['petCircle:dynamic:passAll']} type="" size="middle"
                               onClick={() => this.setState({showBatchCheckModal: true, batchStatus: 1})}>
                        批量通过
                    </TheButton>
                    <TheButton haspermi={['petCircle:dynamic:rejectAll']} type="" size="middle"
                               onClick={() => this.setState({showBatchCheckModal: true, batchStatus: 0})}>
                        批量驳回
                    </TheButton>
                </TheTableExtend>
                <TheTable
                    rowSelection={rowSelection}
                    scroll={{x: "max-content", y: '63vh'}}
                    columns={newColumns}
                    dataSource={dataSource}
                    onChange={this.handleTableChange}
                    rowKey={'dynamicId'}
                />
                <ThePagination
                    pageNo={pageNo}
                    pageSize={pageSize}
                    total={total}
                    pageChange={this.pageChange}
                />
                <Modal title="宠圈时间展示开关" visible={showPetTimeModal} onOk={this.postPetTimeHandleOk}
                       onCancel={() => this.setState({showPetTimeModal: false})}>
                    <Space direction="vertical" style={{width: "100%"}}>
                        <Alert message={<div>当开启时间展示，则动态中的时间均展示出来<br/>当关闭时间展示，则动态中的时间均不展示
                        </div>} type="info"/>
                        <div style={{display: "flex"}}>
                            时间展示开关：<Switch
                            // defaultChecked={petTimeChecked}
                            checked={petTimeChecked}
                            onChange={(checked) => {
                                this.setState({petTimeChecked: checked})
                            }}
                        />
                        </div>
                    </Space>
                </Modal>
                <Modal title="设置发布时间" visible={showReleaseTimeModal} onOk={this.postReleaseTimeHandleOk}
                       onCancel={() => this.setState({showReleaseTimeModal: false})}>
                    发布时间：<DatePicker showTime format="YYYY-MM-DD HH:mm:ss" showNow={false}
                                         disabledDate={this.disabledDate}
                                         onChange={(v, s) => this.setState({releaseTime: s})}/>
                </Modal>
                <Modal title={batchStatus ? "审核通过操作" : "审核驳回操作"} visible={showBatchCheckModal}
                       onOk={this.postBatchCheckHandleOk}
                       onCancel={() => this.setState({showBatchCheckModal: false, batchReason: null})}>
                    <Row>
                        <Col span={4}>
                            <span
                                className={"modal-required"}>*</span><span>{batchStatus ? "通过理由:" : "驳回理由:"}</span>
                        </Col>
                        <Col span={20}>
                            <TextArea row={4} showCount maxLength={100} value={this.state.batchReason}
                                      onChange={(e) => this.setState({batchReason: e.target.value})}/>
                        </Col>
                    </Row>
                </Modal>
                <Modal title={"转发信息"} visible={showDurationModal} cancelText={"关闭"}
                       okButtonProps={{style: {display: "none"}}}
                       onCancel={() => this.setState({showDurationModal: false})} width={800}>
                    <TheTable
                        // scroll={{ x: "max-content", y: '63vh' }}
                        columns={durationColumns}
                        dataSource={durationDataSource}
                        // loading={true}
                        rowKey={'shareType'}
                    />
                </Modal>
                <Modal title={"手动关联内容tab分类"} visible={showManualTabModal} onOk={this.postManualTabHandleOk}
                       onCancel={() => this.setState({showManualTabModal: false})} width={700}>
                    <Alert
                        message={<>关联后展示规则：支持多个标签关联，在对应的内容tab分类下方展示数据;<br/>[推荐]分类下内容为所有动态，不支持关联</>}
                        type="info"/>
                    内容tab分类：<Select
                    showSearch
                    mode="multiple"
                    value={tabValue}
                    options={manualTabList}
                    filterOption={(input, option) =>
                        (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                    }
                    placeholder="请选择"
                    onChange={(e) => this.setState({tabValue: e})}
                    style={{width: 500, marginTop: 15}}
                />
                </Modal>
                <Modal
                    wrapClassName={'evaluateModal'}
                    title={"新增评价"}
                    visible={evaluateModalVisible}
                    // visible={true}
                    cancelText={"关闭弹窗"}
                    destroyOnClose
                    okButtonProps={{style: {display: "none"}}}
                    onCancel={() => this.setState({
                        evaluateModalVisible: false,
                        evaluateModalDataSource: [
                            {
                                status: false,
                                verify: false,
                                no: 1
                            }
                        ],
                    })}
                    width={1200}
                >
                    <Paragraph>
                        <blockquote>动态信息</blockquote>
                    </Paragraph>
                    <Form
                        labelCol={{
                            span: 3
                        }}
                        wrapperCol={{
                            span: 8,
                        }}
                        initialValues={{
                            dynamicTitle: dynamicDetailData.dynamicTitle,
                            dynamicText: dynamicDetailData.dynamicText,
                        }}
                        className={'view'}
                    >
                        <Form.Item
                            label="动态标题"
                            name="dynamicTitle"
                        >
                            <Input disabled={true} bordered={false}/>
                        </Form.Item>
                        <Form.Item label="动态内容" name="dynamicText">
                            <Input.TextArea
                                rows={4}
                                allowClear
                                maxLength={2000}
                                disabled={true}
                                bordered={false}
                            />
                        </Form.Item>
                        <Form.Item label={dynamicDetailData.fileType === 1 ? "图片" : "视频"} name="fileUrl">
                            {this.trans2PicOrVideo(dynamicDetailData.fileUrl)}
                        </Form.Item>
                    </Form>
                    <Paragraph>
                        <blockquote>添加评价</blockquote>
                    </Paragraph>
                    <TheButton
                        type="primary"
                        size="middle"
                        onClick={this.evaluateModalDataSourceAdd}
                        style={{
                            marginBottom: 15,
                            float: 'right'
                        }}
                    >
                        新增
                    </TheButton>
                    <TheTable
                        scroll={{x: "max-content", y: '63vh'}}
                        columns={evaluateModalColumns}
                        dataSource={evaluateModalDataSource}
                        rowKey={(data) => data.no}
                    />
                </Modal>
            </div>
        );
    }
}
